<template>
	<view class='wallet'>
		<view class="showWallet">
			<view class='title'>余额</view>
			<view class="showCount dFlex jStart_aCenter">
				<view class="count">￥<text>{{wallet?wallet:'0.00'}}</text></view>
				<navigator hover-class="none" url='./cash' class='cash'> 提 现 </navigator>
			</view>
		</view>
		<view class="list" v-if='list.length'>
			<view class="recordOne" v-for="(item,index) in list" :key='index'>
				<view class='recordDesc'>{{item.memo}}</view>
				<view class="config dFlex jBetween_aCenter">
					<view class='time'>{{item.createtime}}</view>
					<view class="amount jia_amount">
						{{item.money}}
					</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wallet:'',
				list:[],
				page:1,
				load:false,
			};
		},
		onLoad(){
			this.initList();
		},
		onShow(){
			this.initUser();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initList();
			}
		},
		methods:{
			initList(){
				this.tool.getData('/api/user/moneyLog',{
					type:'1',
					page:this.page,
					pageSize:10,
				},'',this).then(res=>{
					console.log(res);
					if(res){
						this.list = res;
						this.load = res.length >= 10 ? true : false;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 获取用户信息
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					if(res){
						this.wallet = res.money;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.list{
		.recordOne{
			.config{
				.amount{
					font-size: 14px;
					font-weight: bold;
				}
				.jia_amount{
					color:#FF5000;
				}
				.jian_amount{
					color: #67c23a;
				}
				width:100%;
				font-size: 12px;
			}
			.recordDesc{
				width:100%;
				color:#999999;
				font-size:12px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 12px;
				margin-bottom: 12px;
			}
			width:100%;
			padding:12px;
			box-sizing:border-box;
			background:white;
			border-radius:4px;
			margin-bottom:10px;
		}
		width:100%;
		padding:0 12px;
		box-sizing:border-box;
	}
	.showWallet{
		.showCount{
			width:100%;
			.count{
				font-size:16px;
				font-weight: bold;
				text{
					font-size: 20px;
					color:#FF5000;
				}
			}
			.cash{
				width:50px;
				text-align: center;
				box-sizing: border-box;
				border: 1px solid #FF5000;
				padding:4px 8px;
				border-radius: 50px;
				color:#FF5000;
				font-size:12px;
				margin-left:20px;
			}
		}
		.title{
			margin-bottom: 6px;
			font-weight: bold;
		}
		width:100%;
		padding:12px 20px;
		box-sizing: border-box;
		background:white;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		margin-bottom: 12px;
	}
</style>
